<template>
  <h1>{{ msg }}</h1>
  <button type="button" @click="login">count is: {{ state.lowerCaseUsername }}</button>
  <!-- <button type="button" @click="emitHandler">count is: {{ count }}</button> -->
</template>
<script>
import { reactive, computed, onMounted } from "vue";
export default {
  props: {
    msg: {
      type: String
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      count: 321321,
      username: "dsadsa",
      password: "",
      lowerCaseUsername: computed(() => state.username.toLowerCase()),
    });
    onMounted(() => {
      console.log(props.title, "========>title");
    });
    const login = () => {
      emit("login", {
        username: state.username,
        password: state.password,
      });
    };
    return {
      login,
      state,
    };
  },
};
</script>
<style scoped>
a {
  color: #42b983;
}
</style>
